<template>
    <!-- 地图 -->
    <canvas canvas-id="canvasMap" id="canvasMap" class="charts" @touchstart="touchMap"></canvas>
</template>

<script>

    import map_data from './map_data'
    import uCharts from '@/pages/common/u-charts/u-charts.js';
    var _self;
    var canvaMap = null;

    export default {
        props: {
            width: {
                type: Number
            }
        },
        watch: {
            width(val) {
                this.cWidth = val;
                this.getServerData()
            }
        },
        data() {
			return {
                map_data,
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
			}
		},
		mounted() {
			// console.log(this.map_data.features)
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function (res) {
					if(res.pixelRatio>1){
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio =2;
					}
				}
			});
			//#endif
			this.cWidth = this.width;
            this.cHeight = uni.upx2px(500);
            if(this.width != 0) {
                this.getServerData();
            }
			
		},
		methods: {
			randomValue() {
            	return Math.round(Math.random()*1000);
			},
			getServerData(){
                
                let cMap={series:[]};
                cMap.series = map_data.features;
                _self.showMap("canvasMap",cMap);
			},
			showMap(canvasId,chartData){
				canvaMap=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'map',
					fontSize:6,
					padding:[0,0,0,0],
					legend:{
						show:false
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
                    dataLabel:true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						map: {
							border:true,
							borderWidth:1,
							borderColor:'#666666',
                            fillOpacity:0.6,
                            activeBorderColor: "#ff00ff"
						}
					}
				});
			},
			touchMap(e){
				canvaMap.showToolTip(e, {
					format(item) {
						return item.properties.name 
					}
				});
			}
		}
    }
</script>

<style lang="scss" scoped>
.charts {
    width: 100%;
    height: 500upx;
}
</style>